 <template>
  <el-container>
    <el-main>
      <el-form :model="formDatakkType" ref="formDatakkType" :inline="true">
        <el-row class="table-wrapper">
          <el-col :span="24">
            <el-form-item label="分站">
              <el-select v-model="formDatakkType.namespace">
                <el-option
                  v-for="site in allSites"
                  :key="site.namespace"
                  :label="site.namespaceDesc"
                  :value="site.namespace"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="代号">
              <el-input v-model="formDatakkType.kkType" placeholder="代号" style="width: 200px;"></el-input>
            </el-form-item>

            <el-form-item label="说明">
              <el-input v-model="formDatakkType.kkDesc" placeholder="说明" style="width: 200px;"></el-input>
            </el-form-item>

            <el-checkbox v-model="isCainiao">菜鸟</el-checkbox>
          </el-col>
        </el-row>

        <p v-if="isCainiao" class="cnDesc">以下为菜鸟快递必填</p>
        <el-row v-if="isCainiao" class="table-wrapper">
          <el-col :span="24">
            <el-form-item label="快递公司">
              <el-input
                v-model="formDatakkType.cnDesc.sendType"
                placeholder="快递公司代号（如： STO）"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="省">
              <el-input
                v-model="formDatakkType.cnDesc.province"
                placeholder="省"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="市">
              <el-input
                v-model="formDatakkType.cnDesc.sendCity"
                placeholder="市"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="区">
              <el-input
                v-model="formDatakkType.cnDesc.sendDistrict"
                placeholder="区"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="发货地址">
              <el-input
                v-model="formDatakkType.cnDesc.sendAddress"
                placeholder="发货地址"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="电话">
              <el-input
                v-model="formDatakkType.cnDesc.sendMobile"
                placeholder="电话"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="发送人">
              <el-input
                v-model="formDatakkType.cnDesc.sendName"
                placeholder="发送人"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="菜鸟账号id">
              <el-input
                v-model="formDatakkType.cnDesc.userId"
                placeholder="菜鸟账号id"
                style="width: 300px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="kkTypeCreateClick(formDatakkType)"
                class="submit_btn"
              >新增快递仓城市</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table_container">
        <el-table v-loading="tableLoading" :data="kkList" style="width: 100%">
          <el-table-column label="名称" prop="kkDesc" width="160"></el-table-column>
          <el-table-column label="描述" prop="kkType" width="160"></el-table-column>

          <el-table-column label="菜鸟信息">
            <el-table-column prop="cnDesc.province" label="省"></el-table-column>
            <el-table-column prop="cnDesc.sendCity" label="市"></el-table-column>
            <el-table-column prop="cnDesc.sendDistrict" label="区"></el-table-column>
            <el-table-column prop="cnDesc.sendAddress" label="地址" width="230"></el-table-column>
            <el-table-column prop="cnDesc.sendName" label="发件人"></el-table-column>
            <el-table-column prop="cnDesc.sendMobile" label="电话" width="120"></el-table-column>
            <el-table-column prop="cnDesc.sendType" label="快递"></el-table-column>
          </el-table-column>
          <el-table-column label="分站" prop="namespace"></el-table-column>
          <el-table-column label="编辑">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                @click="changeKKStatus(scope.$index)"
                v-if="scope.row.status !== 'ENABLE'"
              >上架</el-button>
              <el-button
                size="small"
                type="primary"
                @click="changeKKStatus(scope.$index)"
                v-if="scope.row.status === 'ENABLE'"
              >下架</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { kkTypeCreate, kkTypeUpdate } from "@/api/admin";
import { getExpressList } from "@/api/info";
import { allSite } from "@/api/site";
import { mapState } from "vuex";

export default {
  data() {
    return {
      formDatakkType: {
        namespace: "",
        kkType: "",
        kkDesc: "",
        cnDesc: {
          sendType: "",
          province: "",
          sendCity: "",
          sendDistrict: "",
          sendAddress: "",
          sendMobile: "",
          sendName: "",
          userId: ""
        }
      },
      isCainiao: false,
      kkList: [],
      tableLoading: false
    };
  },
  computed: {
    ...mapState("manage", ["allSites"])
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.refreshKKList();
    },
    async kkTypeCreateClick(formDatakkType) {
      let formData = Object.assign({}, this.formDatakkType);
      if (!this.isCainiao) {
        delete formData.cnDesc;
      }
      let result = await kkTypeCreate(formData);
      if (result.status === 200) {
        let data = result.data;

        if (data.errMsg) {
        } else {
          this.refreshKKList();
          this.formDatakkType = {
            kkType: "",
            kkDesc: "",
            namespace: "",
            cnDesc: {
              sendType: "",
              province: "",
              sendCity: "",
              sendDistrict: "",
              sendAddress: "",
              sendMobile: "",
              sendName: "",
              userId: ""
            }
          };
          this.$message({
            type: "success",
            message: "新增快递仓成功"
          });
        }
      } else {
      }
    },
    async refreshKKList() {
      this.tableLoading = true;
      try {
        const result = await getExpressList(true);
        if (result.status === 200 && result.data.code === 200) {
          this.kkList = result.data.data;
        } else {
          throw new Error("获取数据失败");
        }
      } catch (err) {
        // this.$message.error('列表获取失败')
        console.log("获取数据失败", err);
      }
      this.tableLoading = false;
    },
    async changeKKStatus(index) {
      try {
        let kk = this.kkList[index];
        let status = kk.status !== "ENABLE" ? "ENABLE" : "CANCELED";

        const result = await kkTypeUpdate(kk.id, status);
        if (result.status === 200 && result.data.code === 200) {
          this.refreshKKList();
        } else {
          throw new Error("获取数据失败");
        }
      } catch (err) {
        // this.$message.error('更新失败')
        console.log("获取数据失败", err);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/mixin";
.label-title {
  font-weight: bold;
  font-size: 24px;
  color: #ff633b;
  margin: 30px;
}
.introduct {
  width: 900px;
  text-align: center;
  margin: auto;
}
// .el-button {
//   width: 200px;
//   margin: auto;
//   display: block;
// }
.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}

.table-wrapper {
  border: 1px solid #ebeef5;
  margin: 30px 0;
  padding-top: 20px;
  padding-left: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.manage_tip {
  font-weight: bold;
  font-size: 12px;
  color: #555;
  margin-bottom: 10px;
}
.cnDesc {
  font-size: 12px;
  margin-bottom: 10px;
}
</style>

 